<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5语义化标签实验</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; line-height: 1.6; }
        header, nav, footer { background: #f5f5f5; padding: 15px 30px; }
        main { max-width: 1200px; margin: 0 auto; padding: 20px 30px; display: grid; grid-template-columns: 3fr 1fr; gap: 30px; }
        article { padding: 20px; border: 1px solid #eee; border-radius: 5px; }
        section { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed #eee; }
        aside { background: #f9f9f9; padding: 20px; border-radius: 5px; }
        footer { margin-top: 30px; text-align: center; }
        nav ul { list-style: none; padding: 0; display: flex; gap: 20px; }
        nav a { text-decoration: none; color: #333; }
        figure { margin: 20px 0; }
        img { max-width: 100%; height: auto; }
        figcaption { color: #666; font-style: italic; text-align: center; }
    </style>
</head>
<body>
    <!-- header标签：页面头部，通常包含网站标题、logo、简介等 -->
    <header>
        <h1>HTML5语义化标签实践</h1>
        <p>用语义化标签构建清晰的页面结构</p>
    </header>

    <!-- nav标签：导航区域，专门用于存放页面主要导航链接 -->
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#articles">文章</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>

    <!-- main标签：页面核心内容，一个页面只能有一个main标签 -->
    <main>
        <!-- article标签：独立完整的内容块，如文章、博客帖子等 -->
        <article>
            <h2>语义化标签的优势与应用场景</h2>
            <p>发布于 <time datetime="2023-10-01">2023年10月1日</time></p>

            <!-- section标签：内容章节分组，每个section通常包含一个标题 -->
            <section>
                <h3>什么是语义化标签？</h3>
                <p>语义化标签是指能够清晰描述内容含义的HTML标签，如&lt;header&gt;表示头部，&lt;nav&gt;表示导航，它们相比传统的&lt;div&gt;标签更具可读性和机器可识别性。</p>
                
                <!-- figure标签：包含媒体内容（图片、图表等），figcaption为其提供说明 -->
                <figure>
                    <img src="https://picsum.photos/800/400?random=10" alt="HTML5语义化标签页面结构示意图">
                    <figcaption>图1：HTML5语义化标签页面结构</figcaption>
                </figure>
            </section>

            <section>
                <h3>为什么需要语义化？</h3>
                <ul>
                    <li>提升代码可读性：开发者能快速理解页面各部分功能</li>
                    <li>优化SEO：搜索引擎可通过标签识别内容优先级</li>
                    <li>增强可访问性：屏幕阅读器能更好地解析页面结构</li>
                    <li>简化样式开发：直接通过标签名定位元素，减少冗余类名</li>
                </ul>
            </section>
        </article>

        <!-- aside标签：侧边栏，包含与主内容相关的辅助信息 -->
        <aside>
            <h3>相关资源</h3>
            <section>
                <h4>推荐阅读</h4>
                <ul>
                    <li><a href="#">HTML5新特性全解析</a></li>
                    <li><a href="#">语义化与SEO优化指南</a></li>
                </ul>
            </section>
            
            <section>
                <h4>关于作者</h4>
                <p>前端开发工程师，专注于Web标准与语义化开发实践。</p>
            </section>
        </aside>
    </main>

    <!-- footer标签：页面底部，通常包含版权信息、联系方式等 -->
    <footer>
        <section>
            <h3>联系方式</h3>
            <p>邮箱：example@webdev.com</p>
        </section>
        <p>&copy; 2023 HTML5语义化实践 - 版权所有</p>
    </footer>
</body>
</html>
